/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-02-06 09:43:34
 */
import { clone } from 'ramda'
import { defineComponent, ref } from 'vue'
import { ArrowUpOutlined, QqOutlined, WechatOutlined, GithubOutlined, MailOutlined } from '@ant-design/icons-vue'
import './style.scss'

import QQ from '@/assets/resume/qq.jpg'
import weixin from '@/assets/resume/weixin.jpg'
import { Resume, ResumeEducation, ResumeExperience, ResumeProject } from '@/interface/resume'
import UserImg from '@/components/user/userImg'
import Home from './components/home'
import Work from './components/work'
import Education from './components/education'
import Project from './components/project'
import Skills from './components/skills'
interface PageState {
	data?: Resume
}
export default defineComponent({
	setup() {
		const userId = localStorage.getItem('userId') as string
		const loading = ref(false)
		const pageState = ref<PageState>({
			data: {},
		})
		getResume()
		async function getResume() {
			loading.value = true
			const { success, data } = await API.blog.resume.getResumeInfo.request(userId)
			loading.value = false
			if (success && data) {
				pageState.value.data = clone(data)
			}
		}
		return () => (
			<div id="resume">
				<div class="body-bg"></div>
				<div class="resume-container">
					<a-row>
						<a-col span={6}>
							<aside>
								<div class="resume-userImg">
									<div class="resume-image-box">
										<div class="resume-image">
											<UserImg
												key="resume-userImg"
												iconSize={166}
												imgSize={166}
												headimgurl={pageState.value.data?.userImage}
											/>
										</div>

										<div class="social-links">
											<div class="social-btn">
												<i class="icon">+</i>
											</div>
											<ul class="links clearfix">
												<li>
													<a href="#">
														<QqOutlined onClick={() => open(QQ)} />
													</a>
												</li>
												<li>
													<a href="#">
														<WechatOutlined onClick={() => open(weixin)} />
													</a>
												</li>
												<li>
													<a href="https://gitee.com/fang_1129691449_wu" target="_blank">
														<GithubOutlined />
													</a>
												</li>
												<li>
													<a href="#">
														<MailOutlined
														// onClick={() => {
														// 	state.visible = true
														// }}
														/>
													</a>
												</li>
											</ul>
										</div>
									</div>
									{/* {updateLoading.value && <LoadingOutlined style="font-size: 40px" class="loadingOutlined flexBox" />} */}
									<div class="resume-user-info">
										<p class="name">{pageState.value.data?.name}</p>
										<p class="designation">
											<i>*</i>
											{pageState.value.data?.occupation}
										</p>
									</div>
								</div>
								<nav class="resume-main-nav">
									<div class="navigation">
										<a-anchor affix={false} target-offset={100}>
											<a-anchor-link href="#home-section" class="home current" title="Home" />
											<a-anchor-link href="#work-section" class="work" title="工作" />
											<a-anchor-link href="#project-section" class="project" title="项目" />
											<a-anchor-link href="#education-section" class="education" title="教育" />
										</a-anchor>
									</div>
								</nav>
							</aside>
						</a-col>
						<a-col span={18}>
							<article>
								<Home dataSource={pageState.value.data as Resume} />
								<Skills dataSource={pageState.value.data as Resume} />
								<Work dataSource={pageState.value.data?.resumeExperience as ResumeExperience[]} />
								<Project dataSource={pageState.value.data?.resumeProject as ResumeProject[]} />
								<Education dataSource={pageState.value.data?.resumeEducation as ResumeEducation[]} />
							</article>
						</a-col>
					</a-row>
				</div>
				<a-backTop>
					<ArrowUpOutlined />
				</a-backTop>
			</div>
		)
	},
})
